<!-- 自定义表单 -->
<template>
	<view class="my-form" :style="{ '--color': color, '--colors': colors }">
		<view v-for="(form, index_f) in orderData" :key="index_f" v-if="orderData.length > 0">
			<!-- 表单详情介绍 -->
			<view class="orderInfo" v-if="form.info && showInfo == 'true'">
				<view class="topMsg" v-if="form.info.show_info == 1">
					<image
						v-if="form.info.wzn_act_img"
						:src="$imgUrls(form.info.wzn_act_img)"
						mode="widthFix"></image>
					<view class="infoContent">
						<view class="infoName">{{ form.info.order_name }}</view>
						<view class="info_item">
							{{ form.info.order_title }}时间：{{ form.info.order_starttime }} ~
							{{ form.info.order_endtime }}
						</view>
						<view class="info_item">联系电话：{{ form.info.order_tel }}</view>
						<view class="info_item">地址：{{ form.info.order_address }}</view>
						<!-- <view class="info_s">{{form.info.order_title}}说明：</view> -->
					</view>
				</view>
				<mp-html
					:content="form.info.order_content"
					lazy-load
					scroll-table
					selectable
					use-anchor
					show-with-animation />
			</view>
			<view class="dowload_file_box flex-box align-center" v-if="form.info.attachment_url">
				<view class="dowload_file" @click="openFile(form.info.attachment_url)">
					<text
						class="thmeBg"
						:style="{
							'--color': color,
						}">
						预览{{ form.info.attachment_name }}
					</text>
				</view>
				<view class="dowload_file" @click="copy_text(baseUrl + form.info.attachment_url)">
					<text
						class="thmeBg"
						:style="{
							'--color': color,
						}">
						复制附件地址
					</text>
				</view>
			</view>
			<view class="photoes" v-if="form.info.imgs">
				<template v-if="form.info.imgs.length == 1">
					<image
						class="img_1"
						@click="previewImage(g, form.info.imgs)"
						:src="$imgUrls(img)"
						mode="aspectFill"
						:show-menu-by-longpress="true"
						v-for="(img, g) in form.info.imgs"
						:key="g"
						v-if="g == 0"></image>
				</template>
				<template v-else>
					<image
						class="img_2"
						@click="previewImage(g, form.info.imgs)"
						:src="$imgUrls(img)"
						mode="aspectFill"
						:show-menu-by-longpress="true"
						v-for="(img, g) in form.info.imgs"
						:key="g"></image>
				</template>
			</view>
			<!-- 表单-->
			<view class="reserve-box">
				<view class="reserve white">
					<view class="reserve-title">{{ form.info.order_name }}</view>
					<view class="form">
						<block v-for="(ord, index) in form.data" :key="index">
							<!-- 1、单行文本框 -->
							<view
								class="text_input align-center"
								v-if="
									ord.config_type == 1 && ord.config_state == 1 && !ord.disable
								">
								<text
									class="Required"
									v-if="
										ord.config_must == 1 ||
										ord.config_name == '用户姓名' ||
										ord.config_name == '联系电话'
									"
									>*</text
								>
								<text class="isKey">{{ ord.config_name }}：</text>
								<input
									:placeholder="
										ord.place ? ord.place : '请输入' + ord.config_name
									"
									v-model="ord.config_content"
									class="form-ipt"
									type="text"
									placeholder-class="pla" />
							</view>
							<!--2、选择日期  3-->
							<view
								class="drop_select"
								v-if="
									ord.config_type == 3 && ord.config_state == 1 && !ord.disable
								">
								<timepicker
									showType="date"
									@btnConfirm="btnConfirm1"
									:isAll="false"
									:index1="index"
									:index2="index_f"
									@btnCancel="btnCancel">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{
											ord.config_content ? ord.config_content : ord.config_pla
										}}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>

							<!-- 3、验证码 -->
							<view
								class="Veri_Code align-center"
								v-if="form.info.verification == 1 && ord.config_name == '联系电话'">
								<view class="inputBox flex-box text_input">
									<text class="Required">*</text>
									<input
										placeholder="请输入验证码："
										type="number"
										v-model="form.info.verCode" />
								</view>
								<button
									class="sendCode thmeBg"
									:style="{ '--color': color }"
									@click="verifCode2(index_f, form.info.order_id)"
									:disabled="form.info.btnDisabled">
									{{ form.info.btnTxt }}
								</button>
							</view>
							<!-- 4、 选择时间-->
							<view
								class="drop_select"
								v-if="
									ord.config_type == 7 && ord.config_state == 1 && !ord.disable
								">
								<timepicker
									showType="minuteToSecond"
									@btnConfirm="btnConfirm"
									:isAll="false"
									:index1="index"
									:index2="index_f"
									id="mypicker"
									@btnCancel="btnCancel"
									ref="mypicker">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{
											ord.config_content ? ord.config_content : time
										}}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>
							<!-- 5、选择地址 -->
							<view
								class="drop_select"
								v-if="
									ord.config_type == 6 && ord.config_state == 1 && !ord.disable
								">
								<view class="picker" @click="showAddPicker(index, index_f)">
									<text class="Required" v-if="ord.config_must == 1">*</text>
									<text class="isKey">{{ ord.config_name }}：</text>
									<text class="flex" :class="{ isKey: ord.config_content }">{{
										ord.config_content ? ord.config_content : ord.pickered
									}}</text>
									<text class="icon-xiasanjiaoxing iconfont"></text>
								</view>
							</view>
							<!-- 6、下拉框 -->
							<view
								class="drop_select"
								v-if="ord.config_type == 2 && ord.config_state == 1 && !ord.disable"
								@click="showSelect(index, index_f)">
								<picker
									mode="selector"
									:range="ord.options"
									:data-indexf="index_f"
									:data-index="index"
									@change="selectorChange"
									style="width: 100%">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{
											ord.config_content
												? ord.config_content
												: '请选择' + ord.config_name
										}}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</picker>
							</view>
							<!-- 7、复选框 -->
							<view
								class="mulitSelect"
								v-if="
									ord.config_type == 5 && ord.config_state == 1 && !ord.disable
								">
								<view>
									<text class="Required" v-if="ord.config_must == 1">*</text>
									<text class="isKey">{{ ord.config_name }}：</text>
								</view>
								<view class="checkList flex">
									<block
										v-for="(check, index_check) in ord.checkList"
										:key="index_check">
										<view
											class="checkItem"
											@click="
												checkClick(
													index,
													index_f,
													index_check,
													check.checked,
													check.name
												)
											">
											<view
												class="checkIcon thmeBorder"
												:style="{ '--color': color }"
												:class="{ thmeBg: check.checked }">
												<text class="icon-xuanzhong iconfont"></text>
											</view>
											<text class="name">{{ check.name }}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 8、单选框 -->
							<view
								class="singleSelect"
								v-if="
									ord.config_type == 9 && ord.config_state == 1 && !ord.disable
								">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<view class="checkList flex">
									<block
										v-for="(check, index_check) in ord.checkList"
										:key="index_check">
										<view
											class="checkItem"
											@click="
												checkClick1(index, index_f, index_check, check)
											">
											<view
												class="checkIcon_"
												:class="{ thmeBorder: ord.config_content == check }"
												:style="{ '--color': color }">
												<text
													:class="
														ord.config_content == check
															? 'thmeBg'
															: 'grayBg'
													"
													:style="{ '--color': color }"></text>
											</view>
											<text class="name">{{ check }}</text>
										</view>
									</block>
								</view>
							</view>
							<!-- 9、上传图片 -->
							<view
								class="uploadImg"
								v-if="
									ord.config_type == 8 && ord.config_state == 1 && !ord.disable
								">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<view class="phone-box flex-box">
									<view
										class="upBox relative"
										style="border: 1px solid #dcdada"
										v-for="(img, i) in ord.imgs"
										:key="i">
										<view
											class="delImg thmeBg"
											@click="del(index, index_f, i)"
											:style="{ '--color': color }">
											<image
												:src="
													staticUrl + '/images/jh_up/delImg.png'
												"></image>
										</view>
										<image
											class="upIcon"
											:src="$imgUrls(img)"
											mode="aspectFit"></image>
									</view>
									<view class="upBox" v-if="ord.imgEn">
										<image
											class="upIcon"
											:src="staticUrl + '/images/jh_up/addImg.png'"
											@click="selectImage(index, index_f, ord.limit)"
											mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<!-- 10、文本域 -->
							<view
								class="areaBox color"
								v-if="
									ord.config_type == 4 && ord.config_state == 1 && !ord.disable
								">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<textarea
									class="textArea"
									v-model="ord.config_content"
									@input="areaBlur($event, index, index_f)"
									:placeholder="ord.plac ? ord.plac : '请输入内容...'" />
							</view>

							<!-- 11、 选择时间 (可配置类型)-->
							<view
								class="drop_select"
								v-if="
									ord.config_type == 10 && ord.config_state == 1 && !ord.disable
								">
								<timepicker
									:showType="ord.dateTimeType"
									@btnConfirm="btnConfirm2"
									:isAll="false"
									:index1="index"
									:index2="index_f"
									id="mypicker"
									@btnCancel="btnCancel"
									ref="mypicker"
									style="width: 100%; height: 100%">
									<view class="picker">
										<text class="Required" v-if="ord.config_must == 1">*</text>
										<text class="isKey">{{ ord.config_name }}：</text>
										<text class="flex" :class="{ isKey: ord.config_content }">{{
											ord.config_content
												? ord.config_content
												: '请选择' + ord.config_name
										}}</text>
										<text class="icon-xiasanjiaoxing iconfont"></text>
									</view>
								</timepicker>
							</view>

							<!-- 16、人数 -->
							<view
								class="text_input align-center"
								v-if="
									ord.config_type == 16 && ord.config_state == 1 && !ord.disable
								">
								<text class="Required" v-if="ord.config_must == 1">*</text>
								<text class="isKey">{{ ord.config_name }}：</text>
								<input
									:placeholder="
										ord.place ? ord.place : '请输入' + ord.config_name
									"
									v-model="ord.config_content"
									class="form-ipt"
									type="number"
									placeholder-class="pla"
									@input="getNum" />
							</view>
						</block>
						<!-- <text class="wrong">{{form.info.wrongTxt}}</text> -->
						<button
							class="reserveNow"
							form-type="submit"
							v-if="
								form.info.order_id == '2147' && (form.station == 0 || !form.station)
							">
							暂无{{ form.info.order_title ? form.info.order_title : '申请' }}权限
						</button>
						<button
							class="reserveNow thmeBg"
							v-if="form.info.price == 0"
							:style="{ '--color': color }"
							form-type="submit"
							@click="reserveNow(index_f, form.info.order_id, form)">
							{{
								form.info.order_title ? '立即' + form.info.order_title : '立即提交'
							}}
						</button>
						<view
							class="row j-sb nowBtn bgcolor"
							v-if="form.info.price != 0"
							@click="reserveNow(index_f, form.info.order_id, form)">
							<view class="d-flex white a-center j-centert bgcolors nowLeft">
								<text class="h6">￥</text>
								<text class="size32">{{ form.info.price * num }}</text>
							</view>
							<view class="d-flex white size32 a-center j-centert bgcolor nowRigth">
								{{
									form.info.order_title
										? '立即' + form.info.order_title
										: '立即提交'
								}}
							</view>
						</view>
					</view>
					<view
						class="color_66 text-center m-top20"
						@click="toRecord"
						v-if="!form.sncode_id"
						>我的{{ form.info.order_title }}</view
					>
				</view>
			</view>
		</view>
		<view
			class="mask success-img-box"
			v-if="showSuccess"
			:style="{ 'padding-top': navHeight + System.statusBarHeight + 'px' }">
			<image
				@click="toStation"
				class="success-img"
				:src="staticUrl + '/images/station/be_station.png'"
				mode="widthFix"></image>
		</view>
		<!-- 选择地址组件（不能放在循环里面） -->
		<mpvue-city-picker
			:shixian2="shixian2"
			ref="mpvueCityPicker_"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
			@onCancel="onCancel"></mpvue-city-picker>

		<showModel @cancelFunc="showModal = false" v-if="showModal" type="2"></showModel>
		<empty v-if="noData" type="1" cat="4" :msg="msg"></empty>
		<!-- 	<showModel @cancelFunc='showModal1=false' v-if='showModal1' type='99' title='提交成功!' :msg='modelTitle'
		 @certain='toUrl("/pages/reserve/myRreserve")' :btn1='btn1' :btn2='btn2'></showModel> -->
		<showModel
			@cancelFunc="showModal1 = false"
			v-if="showModal1"
			type="99"
			title="提交成功!"
			:msg="modelTitle"
			@certain="certainBtn"
			:btn1="btn1"
			:btn2="btn2"></showModel>
		<view class="mask flexac f-column" @click="success_img = ''" v-if="success_img">
			<image
				class="viewbox5"
				:src="$imgUrls(success_img)"
				mode="aspectFit"
				style="height: 890rpx"
				@click.stop></image>
			<text class="iconfont icon-guanbi size60" @click="success_img = ''"></text>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	var date = new Date(),
		that,
		timer = null;
	var mon = date.getMonth() + 1;
	if (mon < 10) mon = '0' + mon;
	var day = date.getDate();
	if (day < 10) day = '0' + day;
	var today = date.getFullYear() + '-' + mon + '-' + day;
	var H = date.getHours();
	var m = date.getMinutes();
	if (H < 10) H = '0' + H;
	if (m < 10) m = '0' + m;
	var time = H + ':' + m; // 当前时间
	import mpvueCityPicker from './mpvue-citypicker/mpvueCityPicker.vue';
	import timepicker from './time-picker.vue';
	import '@/js_sdk/ican_H5Api/ican-H5Api';
	export default {
		props: ['ids', 'info', 'barTitle'], //ids:表单id列表,有可能同时出现多个表单的情况  info:是否显示表单介绍  barTitle:是否修改页面标题 1修改
		components: {
			mpvueCityPicker,
			timepicker,
		},
		data() {
			return {
				colors: getApp().globalData.color_aid,

				staticUrl: this.staticUrl,
				baseUrl: this.baseUrl,
				showModal: false,
				latitude: 0, //纬度
				longitude: 0, //经度
				inputValue: today,
				shixian: false,
				year: date.getFullYear(),
				month: mon,
				day: day,
				indexs: [],
				today: today, // 出生日期默认值
				orderData: [], // 表单结构
				time: time, // 当前时间
				minute: 3,
				hour: 3,
				shixian1: false,
				cityPickerValueDefault: [0, 0, 1], // 默认选择地址
				shixian2: false,
				loadingNow: false, // 图片正在上传
				list: this.ids,
				showInfo: this.info, // 是否显示表单详情
				noData: false,
				msg: '',
				showSuccess: false,
				success_img: '',
				showModal1: false,
				modelTitle: '您已成功提交，请耐心等待审核结果！',
				btn1: '确定',
				btn2: '前往查看',
				jump_pay: '',
				sncode_id: '',
				palyInfo: {}, // 获取支付信息
				num: 1,
			};
		},
		created() {
			let that = this;
			that.getList();
		},
		methods: {
			getNum(e) {
				this.num = e.detail.value;
			},
			toRecord() {
				if (!this.vid) return (this.showModal = true);
				const order_id = this.orderData[0].info.order_id;
				this.toUrl(`/pages/reserve/myRreserve?order_id=${order_id}`);
			},
			certainBtn() {
				let that = this;
				if (that.jump_pay == 2) {
					that.showModal1 = false;
					if (that.palyInfo.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: that.palyInfo.appId,
							extraData: that.palyInfo.extraData,
						});
					} else {
						uni.getProvider({
							service: 'payment',
							success(resp) {
								uni.requestPayment({
									provider: resp.provider[0],
									orderInfo: {
										sncode_id: that.sncode_id,
									},
									timeStamp: that.palyInfo.timeStamp,
									nonceStr: that.palyInfo.nonceStr,
									package: that.palyInfo.package,
									signType: that.palyInfo.signType,
									paySign: that.palyInfo.paySign,
									success(res) {
										uni.showToast({
											title: '支付成功',
											mask: true,
											icon: 'none',
											success() {
												setTimeout(() => {
													uni.navigateBack({
														delta: 1,
													});
												}, 800);
											},
										});
									},
									fail(err) {
										uni.navigateBack({
											delta: 1,
										});
									},
								});
							},
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/reserve/myRreserve',
					});
				}
			},

			toStation() {
				let that = this;
				that.showSuccess = false;
				that.toUrl('/moneyPage/station/index');
			},
			openFile(url) {
				let that = this;
				// #ifdef H5
				window.location.href = that.baseUrl + url;
				// #endif
				// #ifndef H5
				uni.downloadFile({
					url: that.baseUrl + url,
					success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function (res) {
								console.log('打开文档成功');
							},
						});
					},
				});
				// #endif
			},
			copy_text: function (copyData) {
				uni.setClipboardData({
					data: copyData,
					success: function () {
						uni.showToast({
							title: '复制成功！',
							icon: 'success',
						});
					},
				});
			},
			getList() {
				this.list.forEach((item, index) => {
					this.getFormStr(item.order_id, item.sncode_id);
				});
			},
			btnConfirm(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.time = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm1(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.today = e.key;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnConfirm2(e) {
				var indexf = e.indexf;
				var index = e.index;
				this.orderData[indexf].data[index].config_content = e.key;
			},
			btnCancel(e) {
				console.log(e);
			},
			dateChange(e) {
				var DATE = e.target.value;
				this.orderData[index_f].data[index].config_content = DATE;
			},
			timeChange(e) {
				var index = e.target.dataset.index;
				var index_f = e.target.dataset.indexf;
				var TIME = e.target.value;
				this.orderData[index_f].data[index].config_content = TIME;
			},
			showPicker: function (sx, index, index_f) {
				// 记录当前表单序列和当前表单项系列
				this.shixian = sx;
				this.indexs = [index, index_f];
			},
			showPicker1: function (sx, index, index_f) {
				this.shixian1 = sx;
				this.indexs = [index, index_f];
			},
			quxiaobutton: function () {
				this.shixian = false;
			},
			quxiaobutton1: function () {
				this.shixian1 = false;
			},
			quedingbutton: function (y, m, d) {
				this.shixian = false;
				this.inputValue = y + '-' + m + '-' + d;
				this.year = y;
				this.month = m;
				this.day = d;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content =
					this.inputValue;
			},
			quedingbutton1: function (h, m) {
				this.shixian1 = false;
				this.hour = h;
				this.minute = m;
				if (h < 9) h = '0' + h;
				if (m < 9) m = '0' + m;
				this.time = h + ':' + m;
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = this.time;
			},
			bindDateChange: function (event) {
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content =
					event.target.value;
			},
			// 三级联动选择
			showAddPicker(index, index_f) {
				this.shixian2 = true;
				this.indexs = [index, index_f];
			},
			onCancel() {
				this.shixian2 = false;
			},
			onConfirm(e) {
				this.shixian2 = false;
				var add = e.label.replace(/-/g, '');
				this.orderData[this.indexs[1]].data[this.indexs[0]].config_content = add;
			},
			// 下拉框
			showSelect(index, index_f) {
				//下拉框显示
				this.orderData[index_f].data[index].showSelect_ = true;
				this.indexs = [index, index_f];
			},
			chooseSel(index, index_f, option) {
				//下拉框选择
				this.orderData[index_f].data[index].showSelect_ = false;
				if (option) {
					this.orderData[index_f].data[index].config_content = option;
				}
			},
			selectorChange(e) {
				var index_f = e.target.dataset.indexf;
				var index = e.target.dataset.index;
				var selector = e.target.value;
				this.orderData[index_f].data[index].config_content =
					this.orderData[index_f].data[index].options[selector];
			},
			// 复选框
			checkClick(index, index_f, index_check, checked, name) {
				// 复选框选择 2020.01.09 update
				var that = this;
				var chklist = that.orderData[index_f].data[index];
				if (chklist.config_content && typeof chklist.config_content != 'object') {
					chklist.config_content = chklist.config_content.split(',');
				}
				if (chklist.config_content == '') {
					chklist.config_content = [];
				}
				that.orderData[index_f].data[index].checkList[index_check].checked = !checked;
				if (checked) {
					// 取消选择
					chklist.config_content.forEach((chk, index_c) => {
						if (chk == name) {
							that.orderData[index_f].data[index].config_content.splice(index_c, 1);
						}
					});
				} else {
					// 新增选择
					that.orderData[index_f].data[index].config_content.splice(index_check, 0, name);
				}
			},
			//单选
			checkClick1(index, index_f, index_check, name) {
				//单选
				this.orderData[index_f].data[index].config_content = name;
			},
			// 文本域
			areaBlur(e, index, index_f) {
				this.orderData[index_f].data[index].config_content = e.detail.value;
			},
			// 上传图片
			//选择图片
			selectImage(index, index_f, limit) {
				var that = this;
				uni.chooseImage({
					count: limit,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.showLoading({
							title: '图片上传中',
						});
						that.loadingNow = true; // 图片正在上传
						res.tempFilePaths.forEach((tempFilePath, tempIndex) => {
							that.$common
								.uploadFile('/zzjApp/uploade?bid=' + that.bid, tempFilePath)
								.then((res2) => {
									var data = res2;
									if (typeof res2 == 'string') {
										data = JSON.parse(data);
									}
									if (data.errcode == 100) {
										var imgItem;
										imgItem = data.url;
										imgItem = imgItem.substring(22, imgItem.length);
										if (
											that.orderData[index_f].data[index].imgs.length < limit
										) {
											that.orderData[index_f].data[index].imgs.push(imgItem);
										}
										if (
											that.orderData[index_f].data[index].imgs.length >= limit
										) {
											that.orderData[index_f].data[index].imgEn = false;
										}
										that.orderData = [].concat(that.orderData);
									} else {
										uni.showToast({
											icon: 'none',
											title: data.msg + '!',
											duration: 2000,
										});
									}
									uni.hideLoading();
									that.loadingNow = false;
								});
						});
					},
				});
			},
			del(index, index_f, i) {
				// 删除图片
				this.orderData[index_f].data[index].imgs.splice(i, 1);

				this.orderData[index_f].data[index].imgEn = true;
			},
			getFormStr(ordId, sncodeId = '') {
				// 获取自定义表单结构
				let that = this;
				that.$http
					.get({
						url: '/SRA_CustomerForm/customForm',
						data: {
							VeriCode: this.bid,
							ordId: ordId,
							sncodeId,
						},
					})
					.then((res) => {
						if (res.code == 100) {
							var obj = {};

							if (res.data.config) {
								obj.data = res.data.config;
								obj.data.forEach((item, index) => {
									if (item.config_type == 1 || item.config_type == 16) {
										// 文本框
										if (item.config_content) {
											item.place = item.config_content;
											item.config_content = '';
										}
									}
									if (item.config_type == 2) {
										// 下拉框
										item.showSelect_ = false;
										item.options = item.config_content.split('|');
										item.config_content = '';
									}
									if (item.config_type == 6) {
										// 选择地址
										item.pickered = item.config_content
											? item.config_content
											: '请选择区县';
										item.config_content = '';
									}
									if (item.config_type == 7 && !item.config_content) {
										// 选择时间
										item.config_content = that.time;
									}
									if (item.config_type == 3) {
										// 选择日期
										// item.config_content = that.inputValue;
										item.config_pla = '请选择';
										if (item.config_content) {
											item.config_pla = item.config_content;
											item.config_content = '';
										}
									}
									if (item.config_type == 4 && item.config_content) {
										// 下拉框
										item.plac = item.config_content;
										item.config_content = '';
									}
									if (item.config_type == 8) {
										// 上传图片
										item.config_content = '';
										item.imgs = [];
										item.imgEn = true;
										item.limit = item.limit ? parseInt(item.limit) : 1;
									}
									if (item.config_type == 5 && item.config_content) {
										// 复选框
										item.checkList = item.config_content.split('|');
										item.checkList.forEach((check, index_) => {
											var check_ = {
												checked: false,
												name: check,
											};
											item.config_content = [];
											item.checkList[index_] = check_;
										});
									}
									if (item.config_type == 9 && item.config_content) {
										// 单选框
										item.checkList = item.config_content.split('|');
										// item.config_content = item.checkList[0];
									}
								});
							}
							var userInfo = res.data.userInfo;
							if (userInfo) {
								obj.data[0].config_content = userInfo.v_name;
								obj.data[1].config_content = userInfo.v_tel;
							}
							obj.station = res.data.station;
							if (res.data.ordInfo.order_content) {
								res.data.ordInfo.order_content = that.$common.richTxt(
									res.data.ordInfo.order_content
								).html;
							}
							obj.info = res.data.ordInfo;
							if (res.data.ordInfo.order_name) {
								that.$emit('title', res.data.ordInfo.order_name);
							}
							if (res.data.ordInfo.share_img) {
								that.$emit('shareImg', res.data.ordInfo.share_img);
							}
							if (res.data.ordInfo.imgs) {
								obj.info.imgs = obj.info.imgs.split(',');
							}
							obj.info.verCode = '';
							// obj.info.wrongTxt = '';
							obj.info.btnTxt = '发送验证码';
							obj.info.btnDisabled = false;
							that.orderData.push(obj);
							console.log(that.orderData, 'that.orderData');
							if (that.barTitle == 1) {
								uni.setNavigationBarTitle({
									title: obj.info.order_name ? obj.info.order_name : '信息提交',
								});
							}
							that.v++;

							// 补充表单
							if (res.data.sncode_id) {
								obj.sncode_id = res.data.sncode_id;
								obj.data.forEach((item) => {
									if (item.value) item.config_content = item.value;
								});
							}
						} else {
							that.noData = true;
							that.msg = res.data;
						}
					});
			},
			verifCode2: function (index, orderId) {
				// 发送验证码
				let that = this;
				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				if (phoneNumber == '') {
					uni.showToast({
						title: '联系电话不能为空！',
						icon: 'none',
					});
					return false;
				}
				if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
					uni.showToast({
						title: '手机号输入有误！',
						icon: 'none',
					});
					return false;
				}
				if (that.orderData[index].info.btnDisabled) return;
				that.$http
					.post({
						url: '/SRA_CustomerForm/verification_code',
						data: {
							ordId: orderId,
							phone: phoneNumber,
						},
					})
					.then((res) => {
						if (res.code == 1000) {
							// 提交成功
							var cutdown = 60;
							timer = setInterval(function () {
								if (cutdown > 0) {
									cutdown--;
									that.orderData[index].info.btnTxt = '重新发送(' + cutdown + ')';
									that.orderData[index].info.btnDisabled = true;
								} else {
									clearInterval(timer);
									that.orderData[index].info.btnTxt = '发送验证码';
									that.orderData[index].info.btnDisabled = false;
								}
							}, 1000);
						}
						if (res.code == 1001) {
							uni.showToast({
								title: res.cont,
								icon: 'none',
							});
						}
					});
			},

			reserveNow: function (index, orderId, form) {
				// 自定义表单提交
				let that = this;

				if (!this.vid) return (that.showModal = true);
				if (that.loadingNow) return; // 图片正在上传

				var phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/; // 手机号正则检验
				var phoneNumber = that.orderData[index].data[1].config_content; // 手机号
				if (!phoneReg.test(phoneNumber) && phoneNumber != '') {
					// that.orderData[index].info.wrongFlag = true;
					// that.orderData[index].info.wrongTxt = '手机号输入有误！';
					uni.showToast({
						title: '手机号输入有误！',
						icon: 'none',
					});
					return false;
				}
				var tokend = this.bid;
				var code = that.orderData[index].info.verCode;
				var params = {
					VeriCode: tokend,
					ordId: orderId,
					jsCode: this.vid,
					verification: code,
				};
				if (form.sncode_id) params.sncodeId = form.sncode_id;
				let temp = that.orderData[index].data;
				for (var index1 = 0; index1 < temp.length; index1++) {
					var item = temp[index1];
					if (typeof item.config_content == 'object') {
						// 复选
						item.config_content = item.config_content.join(',');
					}
					if (item.config_type == 8 && item.imgs.length) {
						// 上传图片
						item.config_content = item.imgs.join(',');
					}
					if (
						(item.config_must == 1 ||
							item.config_name == '用户姓名' ||
							item.config_name == '联系电话') &&
						item.config_content == ''
					) {
						uni.showToast({
							title: item.config_name + '不能为空！',
							icon: 'none',
						});
						return false;
					}
					if (item.config_type == 16) {
						if (item.config_content < 1)
							return this.$Toast(item.config_name + '不能小于1');
						if (item.config_content > parseFloat(item.other))
							return this.$Toast(item.config_name + '不能超过' + item.other);
						params.payNum = item.config_content;
					}
					var name = 'name' + index1;
					params[name] = item.config_content;
				}
				uni.showLoading({
					title: '请稍等 ~',
				});
				that.$http
					.post({
						url: '/zzj_singleSaleApi/addFrom',
						data: params,
					})
					.then((res) => {
						if (res.code == 100) {
							// 提交成功
							if (form.sncode_id) that.$emit('cancel');
							that.sncode_id = res.sncode_id;
							that.jump_pay = res.jump_pay;
							that.orderData[index].data.forEach((item, index2) => {
								that.orderData[index].data[index2].config_content = '';
								that.orderData[index].data[index2].imgs = [];
								that.orderData[index].info.verCode = '';
								that.orderData[index].info.btnTxt = '发送验证码';
								that.orderData[index].info.btnDisabled = true;
							});
							clearInterval(timer);
							if (orderId == '2147') {
								// 申请站长成功
								that.showSuccess = true;
							} else {
								if (res.jump_pay == 0) {
									uni.hideLoading();
									that.modelTitle = res.data;
									that.btn1 = '确定';
									that.btn2 = '前往查看';
									that.success_img = res.success_img;
									if (!that.success_img) that.showModal1 = true;
								} else if (res.jump_pay == 1) {
									uni.hideLoading();
									window.open(res.jump_url);
								} else if (res.jump_pay == 2) {
									that.btn1 = '暂不支付';
									that.btn2 = '立即支付';
									that.getPlayinfo();
								}
							}
						}
						if (res.code == 101) {
							uni.showToast({
								title: res.data,
								icon: 'none',
							});
							// that.orderData[index].info.wrongTxt = res.data;
						}
					});
			},

			//  获取支付信息
			getPlayinfo() {
				let that = this;
				that.$http
					.post({
						url: '/accountPay/getSncodePay',
						data: {
							sncode_id: that.sncode_id,
						},
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == '100') {
							that.palyInfo = res.data;
							that.showModal1 = true;
						} else {
							uni.showToast({
								title: res.msg,
								mask: true,
								icon: 'none',
							});
						}
					});
			},

			previewImage(i, imgArry) {
				let that = this;
				if (imgArry) {
					let arr = [];
					for (let i in imgArry) {
						arr.push(that.$imgUrls(imgArry[i]));
					}
					uni.previewImage({
						current: i,
						urls: arr,
						indicator: 'number',
						loop: true,
					});
				}
			},
		},
		computed: {
			...mapState([
				'tabTitle',
				'color',
				'city',
				'navHeight',
				'System',
				'vid',
				'share',
				'bid',
			]),
		},
	};
</script>
<style>
	page {
		background-color: #fff0dd !important;
	}
</style>
<style scoped lang="scss">
	.nowBtn {
		height: 88rpx;
		border-radius: 44rpx;
		-webkit-border-radius: 44rpx;
		overflow: hidden;
	}

	.nowLeft {
		width: 270rpx;
	}

	.nowRigth {
		width: 360rpx;
	}

	.my-form {
		.orderInfo {
			background: white;

			.topMsg {
				padding: 0 30rpx;

				.infoContent {
					padding: 10upx 0 30upx;

					.infoName {
						font-size: 36upx;
						color: #333;
						font-weight: bold;
						line-height: 90upx;
						border-bottom: 1px solid #eeeeeeee;
					}

					.info_item {
						font-size: 24upx;
						margin: 10upx 0;
					}

					.info_s {
						margin: 20upx 0 10upx;
						padding-top: 10upx;
						border-top: 1px solid #eeeeee;
					}
				}
			}

			table {
				width: 100% !important;
			}
		}

		// 下载
		.dowload_file_box {
			padding: 20rpx 24rpx;

			.dowload_file {
				margin-right: 20rpx;

				text {
					display: inline-block;
					color: white;
					padding: 0 28rpx;
					line-height: 54rpx;
					text-decoration: underline;
					border-radius: 40rpx;
				}
			}
		}

		// 图集
		.photoes {
			overflow-x: auto;
			white-space: nowrap;
			margin-top: 20rpx;
			padding: 0 $uni-page-space;

			.img_1 {
				width: 100%;
				height: 300rpx;
				border-radius: 8rpx;
			}

			.img_2 {
				width: calc(25% - 8rpx);
				margin-right: 10rpx;
				height: calc(25vw - 10rpx);
				border-radius: 8rpx;
				display: inline-block;
			}
		}

		// 申请站长成功
		.success-img-box {
			min-height: 100vh;
			overflow-y: auto;
			background-color: #ffffff;

			.success-img {
				width: 100vw;
			}
		}

		/* 预约试听 */
		.reserve-box {
			padding: 30rpx;

			.reserve {
				border-radius: 16upx;
				padding: 30upx 30upx 20upx;
				box-sizing: border-box;
				background: white;
				box-shadow: 1px 1px 9px 0px rgba(0, 0, 0, 0.12);

				.reserve-title {
					color: #333333;
					font-size: 36rpx;
					position: relative;
					text-align: center;
				}

				.reserve-title:before {
					position: absolute;
					content: '';
					width: 40upx;
					height: 2px;
					top: calc(100% + 10px);
					left: 50%;
					transform: translateX(-50%);
					background: #333333;
				}

				.form {
					margin-top: 68upx;

					.Required {
						color: #fe1112 !important;
						font-size: 30upx;
						margin-right: 4upx;
						padding: 0;
						display: inline-block;
						vertical-align: middle;
						background: none;
					}

					.isKey {
						color: #000000;
					}

					> view {
						margin-bottom: 30rpx;
					}

					input {
						height: 100%;
						padding-left: 10upx;
						font-size: 26rpx;
						color: #333333;
					}

					.icon-xiasanjiaoxing {
						color: #999999;
						font-size: 28rpx;
					}

					// 1、单行文本框
					.text_input {
						background: #f2f2f2;
						border-radius: 10rpx;
						line-height: 88rpx;
						height: 88rpx;
						display: flex;
						padding: 0 20rpx;

						.form-ipt {
							border: none;
							outline: none;
							flex: 1;
							background: none;
							font-size: 24rpx;
						}

						.pla {
							color: #999999;
						}
					}

					// 3、验证码
					.Veri_Code {
						background: white;
						height: 88rpx;
						display: flex;

						.inputBox {
							background: #f2f2f2;
							border-radius: 10rpx;
							padding-left: 20rpx;
							align-items: center;
						}

						/* 发送验证码 */
						.sendCode {
							margin-left: 20rpx;
							border-radius: 10rpx;
							outline: none;
							box-sizing: border-box;
							color: white;
							line-height: 88rpx;
							font-size: 28rpx;
							width: 250rpx;
						}
					}

					// 2、选择日期  4、选择时间  5、选择地址 6、下拉框 11、选择时间 (可配置类型)
					.drop_select {
						border: 1px solid #d8d8d8;
						height: 88rpx;
						display: flex;
						border-radius: 10rpx;

						.picker {
							width: 100%;
							height: 88rpx;
							display: flex;
							align-items: center;
							padding: 0 20rpx;

							.flex {
								color: #999999;
							}

							.isKey {
								color: #000000;
							}
						}
					}

					// 7、复选框
					.mulitSelect {
						display: flex;

						.checkList {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: -14rpx;

							.checkItem {
								margin-right: 20rpx;
								margin-bottom: 14rpx;
								display: flex;
								align-items: center;

								.checkIcon {
									border-radius: 6rpx;
									width: 30rpx;
									height: 30rpx;
									display: flex;
									align-items: center;

									.icon-xuanzhong {
										font-size: 26rpx;
									}
								}

								.name {
									color: #666666;
									margin-left: 8rpx;
								}
							}
						}
					}

					// 8、单选框
					.singleSelect {
						display: flex;

						.checkList {
							display: flex;
							flex-wrap: wrap;
							margin-bottom: -14rpx;

							.checkItem {
								margin-right: 20rpx;
								margin-bottom: 14rpx;
								display: flex;
								align-items: center;

								.checkIcon_ {
									border-radius: 50%;
									width: 32upx;
									height: 32upx;
									display: inline-block;
									box-sizing: border-box;
									border: 1px solid #d8d8d8;
									position: relative;

									text {
										width: 16upx;
										height: 16upx;
										border-radius: 50%;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
									}

									.grayBg {
										background: #d8d8d8;
									}
								}

								.name {
									color: #666666;
									margin-left: 6rpx;
								}
							}
						}
					}

					// 9、上传图片
					.uploadImg {
						.phone-box {
							flex-wrap: wrap;
							margin-top: 20rpx;
							margin-bottom: -20rpx;

							.upBox {
								width: 196upx;
								height: 196upx;
								border-radius: 10rpx;
								position: relative;

								&:nth-of-type(3n-1) {
									margin: 0 20rpx;
								}

								margin-bottom: 20rpx;

								.upIcon {
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
								}

								.delImg {
									position: absolute;
									z-index: 22;
									width: 32rpx;
									height: 32rpx;
									top: -16rpx;
									right: -16rpx;
									border-radius: 50%;

									image {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
					}

					// 10、文本域
					.areaBox {
						.textArea {
							background-color: #f5f5f5;
							padding: 20rpx;
							font-size: 24rpx;
							height: 196rpx;
							z-index: 0 !important;
							color: rgb(51, 51, 51);
							border-radius: 10rpx;
							margin-top: 10rpx;
						}
					}

					.wrong {
						color: #fe1112;
						padding-left: 16rpx;
						line-height: 40upx;
						margin-bottom: 20upx;
					}

					/* 立即预约 */
					.reserveNow {
						font-size: 32upx;
						color: white;
						height: 88upx;
						line-height: 88upx;
						border-radius: 44upx;
						border: none;
						outline: none;
						position: relative;
						background-color: #d8d8d8;
					}
				}
			}
		}
	}
</style>
